<template>
  <div>
    <div class="info-content">
      <div class="info-content-item">
          <span class="label">单据号:</span>
          <span class="value">{{props.content?.no}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">付款项目:</span>
          <span class="value">{{props.content?.project.title}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">日期:</span>
          <span class="value">{{props.content?.date}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">供应商:</span>
          <span class="value">{{props.content?.supplier?.company_name}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">付款类目:</span>
          <div class="value">
            <div v-for="item, index in feeitems" :key="index">
              {{ item.feeitem_name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.amount }}
            </div>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">类目预算:</span>
          <div class="value feeitem_detail">
            <el-text type="primary">预算：{{ feeitem_detail.budget }}</el-text>&nbsp;/&nbsp;
            <el-text type="success">核算：{{ feeitem_detail.calculate }}</el-text>&nbsp;/&nbsp;
            <el-text type="warning">已支付：{{ feeitem_detail.paid }}</el-text>&nbsp;/&nbsp;
            <el-text type="danger">未支付：{{ feeitem_detail.no_paid }}</el-text>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">付款金额:</span>
          <span class="value">{{props.content?.pay_amount}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">付款方式:</span>
          <span class="value">{{props.content?.pay_type}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">付款日期:</span>
          <span class="value">{{props.content?.pay_time}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">收款账户:</span>
          <span class="value">{{props.content?.account}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">附件:</span>
          <div class="value">
            <div class="files-item" :key="index" v-for="item, index in props.content?.files">
              <Icon class="ba-upload-icon" name="el-icon-File" size="30" color="#c0c4cc" />
              <a :href="`${siteConfig.cdnUrl}${item}`" target="_blank">{{ item.split('/')[item.split('/').length - 1] }}</a>
            </div>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">备注:</span>
          <div class="value">{{props.content?.remarks ? props.content?.remarks : ''}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, onMounted, watch, ref  } from 'vue'
  import { useSiteConfig } from '/@/stores/siteConfig'
  import { feeitemsDetail } from '/@/api/backend/index'
  const props = defineProps({
    content: Object
  })
  const siteConfig = useSiteConfig()
  const feeitem_detail = ref({})
  const feeitems = ref([])
  const feeitemIds = []

  watch(() => props.content, function() {
    try {
      feeitems.value = JSON.parse(props.content?.feeitems)
    } catch {
      feeitems.value = []
    }
    getFeeitemDetail()
})
onMounted(() => { 
    try {
      feeitems.value = JSON.parse(props.content?.feeitems)
    } catch {
      feeitems.value = []
    }
    getFeeitemDetail()
})
  const getFeeitemDetail = () => {
    feeitems.value.forEach((item: any) => {
      feeitemIds.push(item.feeitem_id)
    })
    feeitemsDetail({project_id: props.content.project_id, feeitem_id: feeitemIds}).then((res) => {
        console.log('res', res)
        res.data.calculate = res.data.calculate ? Number(res.data.calculate) : 0
        res.data.paid = res.data.paid ? Number(res.data.paid) : 0
        res.data.no_paid = (res.data.calculate - res.data.paid).toFixed(2)
        feeitem_detail.value = res.data
    })
}
</script>

<style scoped lang="scss">
.info-content-item {
            display: flex; justify-content: space-between; padding: 5px 10px; align-items: center;
            .label { display: inline-block; white-space: nowrap; padding-right: 13px;}
            .value {
                .ml-2 { 
                    margin-bottom: 10px;
                    margin-right: 10px
                }
            }
            div.value {
                
            }
        }
</style>